<template>
  <CardModules title="报警列表">
    <template v-slot:head-button>
      <div class="button-list">
        <div class="button-item" @click="eventHistory"><ProjectFilled />历史</div>
      </div>
    </template>
    <div class="alarm-list" v-if="tableData.length > 0">
      <div class="alarm-item" :class="{ 'row-active': !item.endTime }" v-for="(item, index) in tableData" :key="index" @click="rowSelect(item)">
        <div class="alarm-image">
          <div class="image-title">{{ item.policyName }}</div>
          <img class="image-img" :src="item.fileUrl || '/images/video.png'" />
          <div class="image-time">{{ dateFormat(new Date(item.startTime)) }}</div>
        </div>
        <div class="alarm-info">
          <div class="info-item">
            <div class="alarm-label">区域：</div>
            <div class="alarm-span">{{ item.areaName }}</div>
          </div>
          <div class="info-item">
            <div class="alarm-label">编号：</div>
            <div class="alarm-span">{{ item.eventId }}</div>
          </div>
          <div class="info-item">
            <div class="alarm-label">MMSI：</div>
            <div class="alarm-span">{{ item.mmsi }}</div>
          </div>
          <div class="info-item">
            <div class="alarm-label">类型：</div>
            <div class="alarm-span">{{ getDictLabel(item.alarmType, alarmTypeList, { value: 'value', label: 'name' }) }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="no-data" v-else>暂无数据</div>
  </CardModules>
</template>
<script setup>
  import CardModules from '/@/components/cardModules/index.vue';
  import { ref, onMounted } from 'vue';
  import { api } from '/@/api/plat/event.js';
  import { dateFormat } from '/@/utils/date.js';
  import { alarmTypeList } from '/@/config/strategy';
  import { getDictLabel } from '/@/utils/methods';
  import { message } from 'ant-design-vue';

  const emit = defineEmits(['rowSelect', 'eventHistory', 'flickerArea']);
  let tableData = ref([]);

  function rowSelect(row) {
    emit('rowSelect', row);
  }

  function onload() {
    api
      .queryPage({
        pages: 1,
        size: 30,
        eventType: '1',
        startTime: dateFormat(new Date(), 'yyyy-MM-dd ' + '00:00:00'),
        endTime: dateFormat(new Date(), 'yyyy-MM-dd ' + '23:59:59'),
      })
      .then(({ data }) => {
        const { records } = data;
        tableData.value = records.filter((m) => m.isEnabled);
        // 事件初始化的时候，判断是否需要闪烁
        let list = [];
        for (let item of tableData.value) {
          if (!item.endTime) {
            item.state = '0';
            list.push(item);
          }
        }
        emit('flickerArea', list, '1');
      });
  }

  function getDataByMqtt(row) {
    if (!row.isEnabled) return;
    const index = tableData.value.indexOf((m) => m.eventId === row.eventId);
    if (index < 0) {
      tableData.value.unshift(row);
    } else {
      tableData.value[index] = row;
    }
  }

  function deleteDataByMqtt(eventId) {
    const index = tableData.value.findIndex((m) => eventId === m.eventId);
    if (index >= 0) {
      tableData.value.splice(index, 1);
    }
  }

  // 重新请求
  function reloadDataByMqtt() {
    onload();
  }

  function removeDataByMqtt(list) {
    for (let row of list) {
      const index = tableData.value.findIndex((m) => row.eventId === m.eventId);
      if (index > -1) {
        const data = { ...tableData.value[index] };
        data.endTime = dateFormat(new Date(row.endTime));
        tableData.value[index] = data;
      }
    }
  }

  function eventHistory() {
    emit('eventHistory', '1');
  }

  onMounted(onload);

  defineExpose({
    getDataByMqtt,
    deleteDataByMqtt,
    removeDataByMqtt,
    reloadDataByMqtt,
  });
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
